{% if achievements %}

 <div class="card">
    <!-- Header -->
    <div class="card-header bg-dark text-center" id="heading6">
        <h3 class="mb-0">
            <button class="btn btn-link text-light" data-toggle="collapse" data-target="#collapse6" aria-expanded="true" aria-controls="collapse6">
                <span style="font-size:1.3em;">
                    <i class="fas fa-trophy mr-1"></i> Achievements
                </span>
            </button>
        </h3>
    </div>

    <div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordion">
        <!-- Card Body -->
        <div class="card-body">
           

            <table class="table table-responsive-sm mb-0">
                
                <thead class="table-dark">
                    <tr class="text-center">
                        <th scope="col"></th>
                        <th scope="col">Name</th>
                        <th scope="col">Description</th>
                        <th scope="col"></th>
                        <th scope="col"></th>
                    </tr>
                </thead>

                <form id="achievementOrderingForm" method="post" action="{% url 'cvbuilder:SaveAchievementOrder' %}"> {% csrf_token %}
                    
                    <tbody class="text-center" id="achievements">

                        {% for achievement in achievements %}

                            <tr data-lookup="{{ achievement.id }}">
                                <td><span class="handle_languages handle"></span></td>                
                                <td>{{ achievement.title }}</td>
                                <td>{{ achievement.description }}</td>
                                <td>
                                    <a href="{% url 'cvbuilder:UpdateAchievement' achievement.id %}">
                                        <div class="text-center text-success">
                                            <i class="far fa-edit"></i>
                                        </div>
                                    </a>
                                </td>
                                <td>
                                    <a href="{% url 'cvbuilder:DeleteAchievement' achievement.id %}">
                                        <div class="text-center text-danger">
                                            <i class="far fa-trash-alt"></i>
                                        </div>
                                    </a>
                                </td>
                            </tr>

                        {% endfor %}

                    </tbody>

                    <input type="hidden" id="achievementOrderingInput" name="ordering">
                </form>

            </table>


        </div>
    </div>
</div>

{% endif %}